From e5e8ffa3f704007a67668c4de26c5c5b65cd678b Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Tue, 15 Mar 2016 19:22:07 +0100 Subject: [PATCH] High Contrast: reimplement check and radio Use a similar structure as Adwaita - using buttons for radios and checkboxes. https://bugzilla.gnome.org/show_bug.cgi?id=763707 --- gtk/Makefile.am | 8 + gtk/theme/HighContrast/_common.scss | 185 +++++++++++--- .../HighContrast/assets/bullet-symbolic.svg | 155 +++++++++++ .../assets/bullet-symbolic.symbolic.png | Bin 0 -> 147 bytes .../HighContrast/assets/check-symbolic.svg | 154 +++++++++++ .../assets/check-symbolic.symbolic.png | Bin 0 -> 231 bytes .../HighContrast/assets/dash-symbolic.svg | 153 +++++++++++ .../assets/dash-symbolic.symbolic.png | Bin 0 -> 130 bytes .../HighContrast/gtk-contained-inverse.css | 235 +++++++++++++---- gtk/theme/HighContrast/gtk-contained.css | 240 +++++++++++++----- 10 files changed, 983 insertions(+), 147 deletions(-) create mode 100644 gtk/theme/HighContrast/assets/bullet-symbolic.svg create mode 100644 gtk/theme/HighContrast/assets/bullet-symbolic.symbolic.png create mode 100644 gtk/theme/HighContrast/assets/check-symbolic.svg create mode 100644 gtk/theme/HighContrast/assets/check-symbolic.symbolic.png create mode 100644 gtk/theme/HighContrast/assets/dash-symbolic.svg create mode 100644 gtk/theme/HighContrast/assets/dash-symbolic.symbolic.png diff --git a/gtk/Makefile.am b/gtk/Makefile.am index 45f862a761..6a53a2b7c5 100644 --- a/gtk/Makefile.am +++ b/gtk/Makefile.am @@ -1249,6 +1249,14 @@ gtk.gresource.xml: Makefile.am inspector/Makefile.inc echo " theme/HighContrast/gtk-inverse.css" >> $@; \ echo " theme/HighContrast/gtk-contained.css" >> $@; \ echo " theme/HighContrast/gtk-contained-inverse.css" >> $@; \ + for f in $(srcdir)/theme/HighContrast/assets/*.png; do \ + n=`basename $$f`; \ + echo " theme/HighContrast/assets/$$n" >> $@; \ + done; \ + for f in $(srcdir)/theme/HighContrast/assets/*.svg; do \ + n=`basename $$f`; \ + echo " theme/HighContrast/assets/$$n" >> $@; \ + done; \ echo " theme/win32/gtk-win32-base.css" >> $@; \ echo " theme/win32/gtk.css" >> $@; \ for f in $(srcdir)/cursor/*.png; do \ diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss index 54d533cb37..219f94d4c1 100644 --- a/gtk/theme/HighContrast/_common.scss +++ b/gtk/theme/HighContrast/_common.scss @@ -1605,60 +1605,177 @@ switch { /************************* * Check and Radio items * *************************/ +// draw regular check and radio items using our PNG assets +// all assets are rendered from assets.svg. never add pngs directly -// FIXME -GtkCheckButton.text-button, GtkRadioButton.text-button { +checkbutton.text-button, radiobutton.text-button { // this is for a nice focus on check and radios text - padding: 1px; + padding: 2px 0; outline-offset: 0; -} -@each $w,$a in ('check', 'checkbox'), - ('radio','radio') { - #{$w} { - color: $fg_color; - background-image: none; - -gtk-icon-source: -gtk-icontheme('#{$a}-symbolic'); - &:hover { color: $bg_color; } - &:checked, &:active { - -gtk-icon-source: -gtk-icontheme('#{$a}-checked-symbolic'); - &:disabled { - color: $insensitive_fg_color; - &:backdrop { color: $insensitive_fg_color; } - } - &:backdrop { color: $backdrop_fg_color; } - } - &:disabled { + label:not(:only-child) { + &:first-child { margin-left: 4px; } + &:last-child { margin-right: 4px; } + } + + &:disabled { + &:active, &:indeterminate, & { + // set insensitive color, which is overriden otherwise color: $insensitive_fg_color; + &:backdrop { color: $insensitive_fg_color; } } - &:indeterminate { - -gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic'); + } +} + +check, +radio { + margin: 0 4px; + + &:only-child { margin: 0; } + + min-height: 14px; + min-width: 14px; + border: 1px solid; + -gtk-icon-source: none; + + @include button(normal); + + &:hover { @include button(hover); } + &:active { @include button(active); } + &:disabled { @include button(insensitive); } + &:backdrop { + @include button(backdrop); + + &:disabled { @include button(backdrop-insensitive); } + } + + @if $variant == 'light' { + // the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background + // color, hence we need special casing. + row:selected & { border-color: $selected_borders_color; } + } + + .osd & { + @include button(osd); + + &:hover { @include button(osd); } + &:active { @include button(osd-active); } + &:backdrop { @include button(osd-backdrop); } + &:disabled { @include button(osd-insensitive); } + } + + menu menuitem & { + margin: 0; // this is a workaround for a menu check/radio size allocation issue + + &, &:hover, &:disabled { //FIXME use button reset mixin + min-height: 14px; + min-width: 14px; + background-image: none; + background-color: transparent; + box-shadow: none; + -gtk-icon-shadow: none; + color: inherit; + border-color: currentColor; + animation: none; } - &:backdrop { - color: $backdrop_fg_color; - &:selected { color: $backdrop_fg_color; } + } +} + +%check, +check { + border-radius: 3px; + + &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")), + -gtk-recolor(url("assets/check-symbolic.symbolic.png"))); } + + &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), + -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); } +} + +%radio, +radio { + border-radius: 100%; + + &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")), + -gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); } + + &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), + -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); } +} + +// let's animate things +@keyframes check_check { + from { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); } + to { -gtk-icon-transform: unset; } +} + +@keyframes check_radio { + from { -gtk-icon-transform: scale(0); } + to { -gtk-icon-transform: unset; } +} + +@keyframes check_indeterminate { + from { -gtk-icon-transform: scale(0, 1); } + to { -gtk-icon-transform: unset; } +} + +check:not(:indeterminate):checked { animation: check_check 400ms; } + +radio:not(:indeterminate):checked { animation: check_radio 400ms; } + +check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate 400ms; } + +// no animations in menus +menu menuitem { + check:not(:indeterminate):checked, + radio:not(:indeterminate):checked, + check:indeterminate:checked:active, + radio:indeterminate:checked { animation: none; } +} + + +// treeview stuff, let's the fun begin: +treeview.view check:selected { + &:focus, &:backdrop, & { + &:disabled, & { + @extend %check; } } } -radiobutton radio, -checkbutton check { - min-width: 16px; - min-height: 16px; - margin: 0 2px 0 2px; - &:only-child { - margin: 0; +treeview.view radio:selected { + &:focus, &:backdrop, & { + &:disabled, & { + @extend %radio; + } } } treeview.view check, treeview.view radio { - color: $fg_color; - &:hover { color: $fg_color; } + &:selected { + &:focus, &:hover, & { color: $selected_fg_color; } + + &:backdrop { + &:hover, & { + color: $selected_fg_color; + border-color: $selected_fg_color; + } + + &:disabled { + color: $insensitive_fg_color; + border-color: $insensitive_fg_color; + } + } + + &:disabled { color: $insensitive_fg_color;} + } } + + /************ * GtkScale * ************/ diff --git a/gtk/theme/HighContrast/assets/bullet-symbolic.svg b/gtk/theme/HighContrast/assets/bullet-symbolic.svg new file mode 100644 index 0000000000..c0299734fc --- /dev/null +++ b/gtk/theme/HighContrast/assets/bullet-symbolic.svg @@ -0,0 +1,155 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + diff --git a/gtk/theme/HighContrast/assets/bullet-symbolic.symbolic.png b/gtk/theme/HighContrast/assets/bullet-symbolic.symbolic.png new file mode 100644 index 0000000000000000000000000000000000000000..2ccb0e861afdca8a43bb6c1016fc67817865e41b GIT binary patch literal 147 zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh1|;P@bT0xamSQK*5Dp-y;YjHK^1VD=978lF zCMQVDZ0K!lTsXC{@u8r|b^`;04MK}If_U~)d1`KtlXaxz7ilLQTJ+K0FzJSgo>CAG p^9Cb_KVJm8q$N9e<~(F$@O&n`dE0-6tw2*5JYD@<);T3K0RWo^EJpwU literal 0 HcmV?d00001 diff --git a/gtk/theme/HighContrast/assets/check-symbolic.svg b/gtk/theme/HighContrast/assets/check-symbolic.svg new file mode 100644 index 0000000000..bac5cd6aaa --- /dev/null +++ b/gtk/theme/HighContrast/assets/check-symbolic.svg @@ -0,0 +1,154 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + diff --git a/gtk/theme/HighContrast/assets/check-symbolic.symbolic.png b/gtk/theme/HighContrast/assets/check-symbolic.symbolic.png new file mode 100644 index 0000000000000000000000000000000000000000..eed1f45a58d8b995087a28451a5935079a749cb9 GIT binary patch literal 231 zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh1|;P@bT0xawj^(N7l!{JxM1({$v_d#0*}aI z1_o|n5N2eUHAey{$X?><>&pIsNkmB5N^)5S4FIsKl-zT zC0y{M%Ay7A3xmXqCH97JY}63_;>hp&Ns!~uoL{_I4YsTj2^<<+#RuFjXk1_oTeyQO zr@?cf-y$bd+X;+*SEKiyZA-M=va-Iuydjcz{`por&5BAV!#B#|`+8YVg?x$SoA*t7 Uhxr_FMxgx+p00i_>zopr0HlaYL;wH) literal 0 HcmV?d00001 diff --git a/gtk/theme/HighContrast/assets/dash-symbolic.svg b/gtk/theme/HighContrast/assets/dash-symbolic.svg new file mode 100644 index 0000000000..7886d54166 --- /dev/null +++ b/gtk/theme/HighContrast/assets/dash-symbolic.svg @@ -0,0 +1,153 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + diff --git a/gtk/theme/HighContrast/assets/dash-symbolic.symbolic.png b/gtk/theme/HighContrast/assets/dash-symbolic.symbolic.png new file mode 100644 index 0000000000000000000000000000000000000000..c20d4bac52551bd00de0a3e70d1a2f543d2256d1 GIT binary patch literal 130 zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh1|;P@bT0xamSQK*5Dp-y;YjHK@-01G978lF zCMQU+x-jOmv9+o5@bLUEd~h5{#oaKmJGPj!P5z*Wap2*VaV$BtM-Ci#;K|$FX3M}J Xy+bPFNlOG1&=3YsS3j3^P6